<!-- 
在 Vue 3 中， `keep-alive`  是一个内置的组件，用于在组件切换时保存组件的状态和避免不必要的重新渲染。它通常用于路由组件的切换，能够提高应用的性能和用户体验。以下是对 Vue 3 中  `keep-alive`  的说明总结：
  1. 基本用法
  `keep-alive`  组件通常包裹在动态组件或路由组件的外层，以便在这些组件切换时保持它们的状态。

  示例
  vue
  <template>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </template>

  <script>
  export default {
    data() {
      return {
        currentComponent: 'ComponentA' // 当前显示的组件
      };
    },
    methods: {
      switchComponent() {
        this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
      }
    }
  };
  </script>
  2. 属性
  `keep-alive`  组件支持以下属性：

  - include：一个字符串或正则表达式，用于指定要缓存的组件。只有匹配的组件会被缓存。
  vue
    <keep-alive include="ComponentA">
      <router-view></router-view>
    </keep-alive>
  - exclude：一个字符串或正则表达式，用于指定不缓存的组件。匹配的组件将不会被缓存。
  vue
    <keep-alive exclude="ComponentB">
      <router-view></router-view>
    </keep-alive>
  - max：用于限制缓存的组件数量。当缓存的组件数量超过这个限制时，最久未使用的组件将被销毁。
  vue
    <keep-alive max="10">
      <router-view></router-view>
    </keep-alive>
  3. 生命周期钩子
  `keep-alive`  组件提供了几个特定的生命周期钩子，供缓存组件使用：
  - activated：当组件被激活时调用。适用于需要在组件重新显示时执行某些操作的场景。
  - deactivated：当组件被停用时调用。适用于需要在组件隐藏时执行清理操作的场景。

  示例
  vue
  <template>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </template>

  <script>
  export default {
    data() {
      return {
        currentComponent: 'ComponentA'
      };
    },
    methods: {
      switchComponent() {
        this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
      }
    }
  };
  </script>
  4. 注意事项
  -  `keep-alive`  仅对直接子组件有效，因此在使用时需要确保它包裹的是动态组件或路由组件。
  - 使用  `keep-alive`  时，组件的状态（如数据、输入等）会被保留，但某些特定的状态（如定时器、事件监听等）可能需要手动管理。
  - 在使用  `include`  和  `exclude`  属性时，要确保组件的名称正确匹配。

  总结
  `keep-alive`  是 Vue 3 中一个非常实用的组件，能够有效地提高应用性能和用户体验。通过缓存组件状态，避免不必要的重新渲染， `keep-alive`  使得组件切换更加流畅。理解  `keep-alive`  的用法及其属性，可以帮助开发者更好地管理组件的生命周期和状态。 
-->
<template>
  <div class="app">
    <div class="tabs">
      <template v-for="(item, index) in tabs" :key="item">
        <button :class="{ active: currentTab === item }" 
                @click="itemClick(index)">
          {{ Object.keys(item)[0] }}
        </button>
      </template>
    </div>
    <div class="view">
      <!-- is中的组件需要来自两个地方: 1.全局注册的组件 2.局部注册的组件 -->
      <keep-alive include="home,about">
        <component :is="dynamicsCpns"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
  import Home from "./views/Home.vue";
  import About from "./views/About.vue";
  import Category from "./views/Category.vue";
  import { ref, computed } from "vue";

  const tabs = [{"home": Home}, {"about": About}, {"category": Category}];
  const currentTab = ref("home");
  const currentIndex = ref(0);

  const itemClick = (index) => {
    currentIndex.value = index;
  };

  const dynamicsCpns = computed(() => {
    return tabs[currentIndex.value][Object.keys(tabs[currentIndex.value])[0]]
  })

</script>

<style lang="scss" scoped>
  .tab-bar {
    display: flex;
    background-color: #f2f2f2;

    .tab-bar-item {
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
  }

</style>